<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>登录界面</title>
<link rel="stylesheet" href="../layui/css/layui.css">
<style type="text/css">
	.container{
		 width: 420px;
		 height: 320px;
		 min-height: 320px;  
		 max-height: 320px;  
		 position: absolute;   
		 top: 0;  
		 left: 0;  
		 bottom: 0;  
		 right: 0;  
		 margin: auto;  
		 padding: 20px;  
		 z-index: 130;  
		 border-radius: 8px;  
		 background-color: #fff; 
		 box-shadow: 0 3px 18px rgba(100, 0, 0, .5); 
		 font-size: 16px;
   	}
   	
	.close{
		background-color: white;
		border: none;
		font-size: 18px;
		margin-left: 410px;
		margin-top: -10px;
	}

   	.layui-input{
   		border-radius: 5px;
   		width: 300px;
   		height: 40px;
   		font-size: 15px;
   	}
   	
   	.layui-form-item{
   		margin-left: -20px;
   	}
   	
	#logoid{ 
		margin-top: -16px;
	    padding-left:150px; 
	    padding-bottom: 15px;
	}
	
	.layui-btn{
		margin-left: -50px;
		border-radius: 5px;
   		width: 350px;
   		height: 40px;
   		font-size: 15px;
	}
	
	.verity{
		width: 120px;
	}
	
	.font-set{
		font-size: 13px;
		text-decoration: none; 
		margin-left: 120px;
	}
}
</style>
</head>
<body background="background\2.jpg" style="background-repeat: no-repeat;background-size: 100%;background-attachment: fixed;">
	<form class="layui-form" action="/imgvrifyControllerDefaultKaptcha" method="post">
		<div class="container">
		<div style="text-align:center">
			<div class="layui-form-item">
				<input type="hidden" id="info" th:value="${info}">
				<input type="hidden" id="status" th:value="${status}">
				<label style="font-size:32px;margin:auto;">用户登录</label> 				
			</div>
		</div>
		
	    <div class="layui-form-item">
		    <label class="layui-form-label">用户名</label>
		    <div class="layui-input-block">
		    	<input type="text" id="name" name="name" placeholder="请输入用户名" autocomplete="off" class="layui-input">
		    </div>
	    </div>
	    
		<div class="layui-form-item">
		    <label class="layui-form-label">密&nbsp;&nbsp;码</label>
		    <div class="layui-input-inline">
		    	<input type="password" id="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
		    </div>
		</div>
		
	    <div class="layui-form-item">
	    	<div class="layui-inline">
				<label class="layui-form-label">验证码</label>
			    <div class="layui-input-inline" style="width:160px;height:40px;">
			        <input type="text" name="tryCode" placeholder="请输入验证码" autocomplete="off" class="layui-input" style="width:100%;">
			    </div>
		    </div>
		    <div class="layui-inline" style="width:110px;height:40px;margin:auto;">
			    <div class="layui-input-inline">
			        <img alt="图形验证码" onclick="this.src='/defaultKaptcha?d='+new Date()*1" src="/defaultKaptcha">
			    </div>
		    </div>
		</div>
		
		<div class="layui-form-item">
		</div>
		<div class="layui-form-item">
		</div>
		
		<div class="layui-form-item">
		    <div class="layui-input-block">
		      	<input type="submit" id="button" class="layui-btn layui-btn-warm" value="登录">
		    </div>
		</div>
		
		</div>
	</form>
	
	<script src="../layui/layui.js"></script>
	<script>
		layui.use(['layer',"jquery"], function(){
			var layer=layui.layer;
			var $=layui.jquery;
			var info=document.getElementById("info").value;
			var status=document.getElementById("status").value;
			if(info!="")
				layer.alert(info);
			else if(status=="1")
				layer.alert("用户名不存在");
			else if(status=="2")
				layer.alert("密码错误");
			$(document).on('click','#button',function(){
				var name=document.getElementById("name").value;
				var password=document.getElementById("password").value;
				if(name==""){
					layer.alert('用户名不能为空');
					return false;
				}
				if(password==""){
					layer.alert('密码不能为空');
					return false;
				}
			});
		});
	</script>
</body>
</html>